{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '博客详情页'])}
<style>
    .lyear-blog-wrapper {
        font-size: 14px;
    }
    .lyear-blog-wrapper a {
        text-decoration: none;
    }
    .lyear-blog-wrapper a:not(.lyear-tag-cloud a),
    .lyear-blog-footer a{
        color: #4d5259;
        -webkit-transition: color 0.5s, background-color 0.5s;
        -o-transition: color 0.5s, background-color 0.5s;
        transition: color 0.5s, background-color 0.5s;
    }
    .lyear-blog-wrapper a:hover,
    .lyear-blog-footer a:hover {
        color: var(--bs-primary);
    }
    .lyear-arc-meta {
        list-style: none;
        padding: 0;
        margin: 0;
        opacity: .7;
    }
    .lyear-arc-meta > li {
        display: inline-block;
        margin-right: 30px;
    }
    .lyear-arc-title {
        font-weight: 500;
        line-height: 1.7;
    }
    .lyear-arc-synopsis {
        font-size: 14px;
        line-height: 1.7;
    }
    .lyear-arc {
        background-color: #fff;
        border: 1px solid #f0f0f0;
    }
    .lyear-arc-synopsis p:last-child {
        margin-bottom: 0px;
    }
    /* 侧边栏 */
    .lyear-widget-title {
        font-size: 16px;
        color: #4d5259;
        position: relative;
        margin: 0 0 25px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .lyear-widget-title:before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    .lyear-widget-title:after {
        content: "";
        display: block;
        width: 35px;
        z-index: 1;
        position: relative;
        margin: 15px auto 25px 0px;
        border-bottom: 1px solid #007bff;
    }
    .lyear-widget ul,
    .lyear-widget ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .lyear-widget ul li,
    .lyear-widget ol li {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .lyear-widget ul li:last-child,
    .lyear-widget ol li:last-child {
        border: 0;
    }
    .lyear-widget-hot-posts ul li {
        border-bottom: 1px solid rgba(238, 238, 238, .7);
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .lyear-widget-hot-posts ul li span {
        display: block;
        margin-top: 5px;
        opacity: .7;
    }
    .lyear-tag-cloud a {
        line-height: 1.5;
    }
    .lyear-tag-cloud a:hover {
        color: #fff;
    }
    /* 底部 */
    .lyear-blog-footer {
        color: #4d5259;
        padding: 2.5rem 0;
        text-align: center;
        background-color: #fcfcfc;
        border-top: .05rem solid #f0f0f0;
    }
    .lyear-blog-footer p:last-child {
        margin-bottom: 0;
    }
    /* 留言 */
    .lyear-blog-comment-title {
        padding-top: 20px;
        margin-bottom: 20px;
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
    }
    .lyear-blog-comment-list {
        margin-top: 50px;
    }
    .lyear-blog-comment-list img {
        width: 60px;
    }
    .lyear-blog-comment-list .lyear-blog-comment-body {
        -ms-flex: 1;
        flex: 1;
    }
    .lyear-blog-comment-list .lyear-blog-comment-body a.reply-btn {
        float: right;
        text-transform: uppercase;
        font-size: 12px;
    }
    .lyear-blog-comment-list .lyear-user-name {
        font-size: 14px;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: .25rem;
        line-height: 1.7;
    }
    .lyear-blog-comment-list .lyear-blog-comment-body p.post-date {
        margin-bottom: 20px;
        font-size: 12px;
    }
    .lyear-blog-comment-children {
        list-style: none;
    }
    .lyear-blog-comment-list .lyear-blog-comment-respond {
        padding-left: 40px;
    }
    .lyear-blog-cancel-comment-reply {
        display: none;
        cursor: pointer;
        padding-left: 10px;
        font-weight: normal;
    }
    </style>
    <!--导航 开始-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="{$xpConfig['web_static']}/images/logo-sidebar.png" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#"><i class="mdi mdi-home-variant-outline"></i> 网站选项</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="mdi mdi-file-outline"></i> 文章专栏</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="mdi mdi-send-outline mdi-rotate-315"></i> 资源分享</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="mdi mdi-timer-sand"></i> 点点滴滴</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="mdi mdi-alpha-i-circle-outline"></i> 关于本站</a>
          </li>
        </ul>
        <div class="d-flex">
          <a href="#"><i class="mdi mdi-qqchat mdi-24px"></i></a>
        </div>
      </div>
    </div>
  </nav>
  <!--导航 结束-->
  
  <div class="lyear-blog-wrapper">
    <section class="mt-3 pb-3">
      <div class="container">
  
        <div class="row">
          <!-- 文章阅读 -->
          <div class="col-xl-8">
            <article class="lyear-arc p-4">
              <h2 class="lyear-arc-title mb-3 fs-4"><a href="post.html">蔚来汽车宣布将在今日20点召开第二季度财报业绩电话会</a></h2>
              <ul class="lyear-arc-meta">
                <li><i class="mdi mdi-calendar"></i> 2019-09-25 09:21</li>
                <li><i class="mdi mdi-tag-text-outline"></i> <a href="#">AI</a>, <a href="#">芯片</a></li>
                <li><i class="mdi mdi-comment-multiple-outline"></i> <a href="#">3 评论</a></li>
              </ul>
              
              <div class="lyear-arc-preview my-3">
                <img src="{$xpConfig['web_static']}/example/images/gallery/10.jpg" alt="" class="img-fluid rounded">
              </div>
  
              <div class="lyear-arc-detail" deep="6">
                <p>去年 9 月在杭州云栖大会上，阿里巴巴正式宣布成立芯片公司“平头哥半导体有限公司”，它由阿里去年 4 月收购的国产芯片企业中天微与阿里旗下达摩院芯片团队整合而成，“平头哥”自此横空出世。</p>
      
                <h3>生活有度，人生添寿。</h3>
                <p>今年 7 月，<a href="#" target="_blank">平头哥正式发布玄铁 910</a>，据称这是目前业界最强的 RISC-V 处理器。</p>
                <p>时隔两个月，今天在杭州举办的云栖大会上，“平头哥”推出了高性能 AI 推理芯片含光 800。含光 800 是阿里成立平头哥芯片公司后第一款正式流片的芯片。这是阿里里巴巴第一次使用了自己的一套硬件架构，也是互联网公司研发的第一款大芯片。</p>
  <pre><code>function $initHighlight(block, cls) {
    try {
      if (cls.search(/\bno\-highlight\b/) != -1)
        return process(block, true, 0x0F) +
               ` class=&quot;${cls}&quot;`;
    } catch (e) {
      /* handle exception */
    }
    for (var i = 0 / 2; i &lt; classes.length; i++) {
      if (checkCondition(classes[i]) === undefined)
        console.log(&#39;undefined&#39;);
    }
  }
  
  export  $initHighlight;
  </code></pre>
                <h3>排版</h3>
                <p>达摩院院长张建锋宣布了这则消息，并表示：“在全球芯片领域，阿里巴巴是一个新人，玄铁和含光 800 是平头哥的万里长征第一步，我们还有很长的路要走。”</p>
                <p>据了解，在业界标准的 ResNet-50 测试中，含光 800 推理性能达到 78563 IPS，比目前业界最好的 AI 芯片性能高 4 倍；能效比 500 IPS/W，是第二名的 3.3 倍。在杭州城市大脑的业务测试中，1 颗含光 800 的算力相当于 10 颗 GPU。</p>
                <p>含光 800 性能的突破得益于软硬件的协同创新：硬件层面采用自研芯片架构，通过推理加速等技术有效解决芯片性能瓶颈问题；软件层面集成了达摩院先进算法，针对 CNN 及视觉类算法深度优化计算、存储密度，可实现大网络模型在一颗 NPU 上完成计算。</p>
  
                <h5>列表:</h5>
                <ul>
                  <li>Lorem ipsum dolor sit amet consectetuer.</li>
                  <li>Aenean commodo ligula eget dolor.</li>
                  <li>Aenean massa cum sociis natoque penatibus.</li>
                </ul>
                <ol>
                  <li>Lorem ipsum dolor sit amet consectetuer.</li>
                  <li>Aenean commodo ligula eget dolor.</li>
                  <li>Aenean massa cum sociis natoque penatibus.</li>
                </ol>
                <h5>引用示例:</h5>
                <blockquote class="blockquote">
                    <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。</p>
                    <footer class="blockquote-footer">别林斯基</footer>
                </blockquote>
                      
                <h5>表格示例:</h5>
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">First</th>
                      <th scope="col">Last</th>
                      <th scope="col">Handle</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                  </tbody>
                </table>
  
                <div class="mt-5">
                  <h6>标签:</h6>
                  <div class="lyear-tag-cloud">
                    <a href="#" class="badge bg-primary">logo</a>
                    <a href="#" class="badge bg-primary">AI</a>
                    <a href="#" class="badge bg-primary">芯片</a>
                  </div>
                </div>
  
                <div class="mt-5 lyear-blog-comment-title">
                  <h5 class="mb-4"><span>评论 (5)</span></h5>
                </div>
  
                <ul class="list-unstyled lyear-blog-comment-list">
  
                  <li id="lyear-blog-comment-1">
                    <div class="d-flex align-items-start mt-5">
                      <img class="d-flex me-3 rounded-circle" src="{$xpConfig['web_static']}/example/images/users/avatar-1.png" alt="花满楼">
                      <div class="lyear-blog-comment-body">
                        <a href="#!" class="reply-btn" data-id="1"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                        <h4 class="lyear-user-name"><a href="#!">花满楼</a></h4>
                        <p class="text-muted post-date">2019-09-25 16:17</p>
                        <p>只要你肯去领略，就会发现人生本是多么可爱，每个季节里都有很多足以让你忘记所有烦恼的赏心乐趣。</p>
                      </div>
                    </div>
                  </li>
  
                  <li id="lyear-blog-comment-2">
                    <div class="d-flex align-items-start mt-5">
                      <img class="d-flex me-3 rounded-circle" src="{$xpConfig['web_static']}/example/images/users/avatar-2.png" alt="陆小凤">
                      <div class="lyear-blog-comment-body">
                        <a href="#!" class="reply-btn" data-id="2"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                        <h4 class="lyear-user-name"><a href="#!">陆小凤</a></h4>
                        <p class="text-muted post-date">2019-07-06 15:32</p>
                        <p>有的人求名，有的人求利，我求的是什么呢？</p>
                      </div>
                    </div>
                    <ul class="lyear-blog-comment-children">
                      <li id="comment-3">
                        <div class="d-flex align-items-start mt-5">
                          <img class="d-flex me-3 rounded-circle" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png" alt="西门吹雪">
                          <div class="lyear-blog-comment-body">
                            <a href="#!" class="reply-btn" data-id="3"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                            <h4 class="lyear-user-name"><a href="#!">西门吹雪</a></h4>
                            <p class="text-muted post-date">2019-07-06 15:36</p>
                            <p>麻烦！</p>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
  
                  <li id="lyear-blog-comment-4">
                    <div class="d-flex align-items-start mt-5">
                      <img class="d-flex me-3 rounded-circle" src="{$xpConfig['web_static']}/example/images/users/avatar-4.png" alt="楚留香">
                      <div class="lyear-blog-comment-body">
                        <a href="#!" class="reply-btn" data-id="4"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                        <h4 class="lyear-user-name"><a href="#!">楚留香</a></h4>
                        <p class="text-muted post-date">2019-06-27 10:02</p>
                        <p>闻君有白玉美人，妙手雕成，极尽妍态, 不胜心向往之。今夜子正,当踏月来取, 君素雅达，必不致令我徒劳往返也。</p>
                      </div>
                    </div>
                  </li>
  
                  <li id="lyear-blog-comment-5">
                    <div class="d-flex align-items-start mt-5">
                      <img class="d-flex me-3 rounded-circle" src="{$xpConfig['web_static']}/example/images/users/avatar-5.png" alt="傅红雪">
                      <div class="lyear-blog-comment-body">
                        <a href="#!" class="reply-btn" data-id="5"><i class="mdi mdi-reply"></i>&nbsp; 回复</a>
                        <h4 class="lyear-user-name"><a href="#!">傅红雪</a></h4>
                        <p class="text-muted post-date">2019-06-26 11:45</p>
                        <p>一把刀，一条没有退路的征途；一个人，一个孤独而又寂寞的灵魂！</p>
                      </div>
                    </div>
                  </li>
                </ul>
                
                <div id="lyear-blog-respond" class="lyear-blog-comment-respond">
                  <div class="mt-2">
                    <h5><span>说点什么吧...</span> <small class="lyear-blog-cancel-comment-reply" onclick="cancelReply()" data-filtered="filtered">(取消回复)</small></h5>
                  </div>
                  
                  <form action="#" method="post" class="mt-4 lyear-blog-comment-form">
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="mb-3">
                        <input id="author" class="form-control" placeholder="昵称*" name="author" type="text" required="">
                      </div>
                    </div>
  
                    <div class="col-sm-6">
                      <div class="mb-3">
                        <input id="email" class="form-control" placeholder="邮箱*" name="email" type="text" required="">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="mb-3">
                        <input id="subject" class="form-control" placeholder="网址" name="subject" type="text">
                      </div>
                    </div>
                  </div>
  
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="mb-3">
                        <textarea id="comment" class="form-control" rows="5" placeholder="想说的内容" name="comment" required=""></textarea>
                      </div>
                    </div>
                  </div>
  
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="mb-3">
                        <button name="submit" type="submit" id="submit" class="btn btn-primary">发表评论</button>
                        <input type="hidden" name="comment_arc_id" value="1" id="comment_arc_id" data-filtered="filtered">
                        <input type="hidden" name="comment_parent" id="comment_parent" value="0" data-filtered="filtered">
                      </div>
                    </div>
                  </div>
                </form>
                </div>
  
              </div>
  
            </article>
          </div>
          <!-- 内容 end -->
  
          <!-- 侧边栏 -->
          <div class="col-xl-4">
            <div class="lyear-blog-sidebar">
              <!-- 热门文章 -->
              <aside class="lyear-widget lyear-widget-hot-posts">
                <div class="lyear-widget-title">热门文章</div>
                <ul>
                  <li>
                    <a href="#">三星将为 Galaxy Fold 用户提供 149 美元更换屏幕服务</a> <span>2019-09-25 10:05</span>
                  </li>
                  <li>
                    <a href="#">专家：10年后6G将问世 数据传输速率有望比5G快100倍</a> <span>2019-09-25 08:06</span>
                  </li>
                  <li>
                    <a href="#">苹果正式发布 iPadOS 13.1 系统，加入多项强大新功能</a> <span>2019-09-25 09:35</span>
                  </li>
                </ul>
              </aside>
  
              <!-- 归档 -->
              <aside class="lyear-widget">
                <div class="lyear-widget-title">归档</div>
                <ul>
                  <li><a href="#">2019 三月</a> (40)</li>
                  <li><a href="#">2019 四月</a> (08)</li>
                  <li><a href="#">2019 五月</a> (11)</li>
                  <li><a href="#">2019 六月</a> (21)</li>
                </ul>
              </aside>
  
              <!-- 标签 -->
              <aside class="lyear-widget lyear-widget-tag-cloud">
                <div class="lyear-widget-title">热门标签</div>
                <div class="lyear-tag-cloud">
                  <a href="#" class="badge bg-teal">php</a>
                  <a href="#" class="badge bg-primary">苹果</a>
                  <a href="#" class="badge bg-danger">比特币</a>
                  <a href="#" class="badge bg-secondary">linux</a>
                  <a href="#" class="badge bg-pink">前端</a>
                  <a href="#" class="badge bg-brown">vue</a>
                </div>
              </aside>
            </div>
          </div>
          <!-- 侧边栏 end -->
        </div>
  
      </div>
      <!-- end container -->
    </section>
  </div>
  <footer class="lyear-blog-footer">
    <p>博客基于 <a href="https://www.getbootstrap.cn/" target="_blank">Bootstrap 5</a></p>
    <p>
      <a href="#">返回顶部</a>
    </p>
  </footer>